import Taro, { Component } from '@tarojs/taro'
import { View, Text, Video, Image } from '@tarojs/components'

import like from '@assets/images/like01.png'
import liked from '@assets/images/liked.png'
import more from '@assets/images/more.png'
import comment from '@assets/images/comment.png'

import './index.scss'

class MyVideo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      
    }
  }
  render() { 
    return (
      <View className='my-video'>
        <View className='my-video__content'>
          <Video
            id='myVideo'
            src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
            controls
            autoplay={false}
            poster={this.props.info.coverUrl}
            initialTime='0'
            loop={false}
            muted={false}
          >
          </Video>
          <View className='flex-display'>
            <Text className='text'>{this.props.info.title}</Text>
            <Image className='title-img' src={this.props.info.coverUrl} />
          </View>
          <View className='at-row at-row__align--center btm'>
            <View className='at-col at-col-6'>
              <Image className='text-img' src={this.props.info.coverUrl} />
              <Text className='img-text'>{this.props.info.creator[0].username}</Text>
            </View>
            <View className='at-col at-col-2 position'>
              <Image className='absolute-img' src={like} />
              <Text className='absolute-text'>{this.props.info.durationms}</Text>
            </View>
            <View className='at-col at-col-2 at-col__offset-1 position'>
              <Image className='absolute-img' src={comment} />
              <Text className='absolute-text'>{this.props.info.playTime}</Text>
            </View>
            <View className='at-col at-col-1 position'>
              <Image className='absolute-img' src={more} />
            </View>
          </View>
        </View>
      </View>
    )
  }
}

MyVideo.defaultProps = {
  info: {}
}

export default MyVideo
